<style>
	.center {
		height: 100vh;
		background-image: url('../../assets/img/c5cec13d0948fd4aa806f0e481014119.jpeg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	h1 {
		font-size: 30px;
		color: black;
	}

	.logon {
		background-color: rgba(255, 255, 255, 0.8);
		/* 使用rgba设置背景颜色的透明度 */
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(195, 74, 74, 0.22);
		width: 700px;
		/* 将宽度调整为600px */
		max-width: 100%;
		min-height: 400px;
		/* 将最小高度调整为360px */
		margin-top: 20px;
		display: flex;
		background: -webkit-linear-gradient(right, #80a5d5, #29eac4);
	}


	.overlaylong {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.overlaylongleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: #eee;
		transform: translateX(100%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.overlaylongright {
		border-radius: 10px 0 0 10px;
		width: 50%;
		height: 100%;
		background-color: #eee;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.overlaytitle {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sbu {
		display: inline-block;
		/* 或者 display: inline; */
		margin-right: 10px;
		/* 如果需要添加一些间距 */
	}

	.overlaytitleH2 {
		font-size: 30px;
		color: #eee;
		margin-top: 20px;
	}

	.overlaytitleP {
		font-size: 15px;
		color: #eee;
		margin-top: 20px;
	}

	.overlaytitleleft {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(0%);
		transition: transform 0.6s ease-in-out;
	}

	.overlaytitleright {
		border-radius: 0px 10px 10px 0px;
		width: 50%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateX(-100%);
		transition: transform 0.6s ease-in-out;
	}

	.overlaytitle-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.overlaytitle-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.buttongohs {
		width: 180px;
		height: 40px;
		border-radius: 50px;
		border: 1px solid #eee;
		color: #eee;
		font-size: 15px;
		text-align: center;
		line-height: 40px;
		margin-top: 40px;
	}

	.overlaylongH2 {
		font-size: 25px;
		color: black;
		/* width: 250px; */
	}

	.overlaylong-Signin {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.overlaylong-Signup {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	input {
		background-color: #eee;
		border: none;
		padding: 12px 15px;
		margin: 10px 0;
		width: 240px;
	}

	h3 {
		font-size: 10px;
		margin-top: 10px;
		cursor: pointer;
	}

	.role-select {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.rd {
		margin-right: 10px;
	}


	.inupbutton {
		background-color: #29eac4;
		border: none;
		width: 180px;
		height: 40px;
		border-radius: 50px;
		font-size: 15px;
		color: #eee;
		text-align: center;
		line-height: 40px;
		margin-top: 30px;
	}
</style>

<template>
	<div class="center">
		<div class="logon">
			<div :class="overlaylong">
				<div class="overlaylong-Signin" v-if="disfiex == 0">
					<h2 class="overlaylongH2">登 录</h2>
					<input type="text" placeholder="用户名" v-model.number="formLabelAlign.mobile">
					<input type="password" placeholder="密码" v-model="formLabelAlign.password">
					<button class="inupbutton" @click="login()">submit</button>
				</div>
				<div class="overlaylong-Signup" v-if="disfiex == 1">
					<h2 class="overlaylongH2">注 册</h2>

					<input type="text" placeholder="用户名" v-model="signin.username">
					<input type="text" placeholder="电话" v-model="signin.mobile">
					<input type="password" placeholder="密码" v-model="signin.password">
					<input type="text" placeholder="学号或教师号" v-model="signin.id">
					<div class="role-select">
						<el-radio-group v-model="signin.role" class="rd">
							<el-radio label="2">学生</el-radio>
							<el-radio label="1">老师</el-radio>
						</el-radio-group>
					</div>
					<button class="inupbutton" @click="register()">submit</button>
				</div>

			</div>
			<div :class="overlaytitle">
				<div class="overlaytitle-Signin" v-if="disfiex == 0">
					<h2 class="overlaytitleH2">在线考试系统欢迎您!</h2>
					<p class="overlaytitleP">
						预祝考试顺利
					</p>
					<div class="buttongohs" @click="Signin">注 册</div>
				</div>
				<div class="overlaytitle-Signup" v-if="disfiex == 1">
					<h2 class="overlaytitleH2">欢迎注册</h2>
					<p class="overlaytitleP"></p>
					<div class="buttongohs" @click="Signup">已有账号，登录</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				signin: {
					username: '',
					password: '',
					mobile: '',
					id: '',
					role: 0,
				},
				overlaylong: 'overlaylong',
				overlaytitle: 'overlaytitle',
				disfiex: 0,
				formLabelAlign: {
					mobile: '',
					password: ''
				}
			}
		},
		mounted() {
			this.formLabelAlign.mobile = this.$route.query.tel
		},
		methods: {
			register() {
				console.log(...this.signin)
				console.log(this.signin)
				this.$axios({
					url: `/api/register`,
					method: 'post',
					data: {
						...this.signin
					}
				}).then(res => {
					console.log(res.data)
					if (res.data.code == 0) {
						this.$message({
							message: '恭喜你，注册成功',
							type: 'success'
						});
						this.Signup()
						this.formLabelAlign = { ...this.formLabelAlign, ...this.signin };
					}
					if (res.data.code == 1) {
						this.$message({
							message: '注册失败。原因为:' + res.data.message,
							type: 'error',
							showClose: true
						});
					}
				});
			},
			login() {
				console.log("登录操作执行-------");
				this.$axios({
					url: `/api/login`,
					method: 'post',
					data: {
						...this.formLabelAlign
					}
				}).then(res => {
					let resData = res.data.data
					console.log(res)
					if (resData != null) {
						this.$cookies.set("user", resData)
						this.$store.dispatch('setUserTel', resData.tel); // 设置用户手机号
						console.log(this.$store.state.userTel);
						switch (resData.role) {
							case 0:  //管理员
								this.$cookies.set("cname", resData.adminName)
								this.$cookies.set("cid", resData.adminId)
								this.$cookies.set("role", 0)
								this.$router.push({ path: '/index' }) //跳转到首页
								break
							case 1: //教师
								this.$cookies.set("cname", resData.teacherName)
								this.$cookies.set("cid", resData.teacherId)
								this.$cookies.set("role", 1)
								this.$router.push({ path: '/index' }) //跳转到教师用户
								break
							case 2: //学生
								this.$cookies.set("cname", resData.studentName)
								this.$cookies.set("cid", resData.studentId)
								this.$router.push({ path: '/student' })
								break
						}
					}
					if (resData == null) { //错误提示
						this.$message({
							showClose: true,
							type: 'error',
							message: '用户名或者密码错误'
						})
					}
				})
			},
			clickTag(key) {
				this.role = key
			},
			Signin() {
				this.signin = {}
				this.overlaylong = "overlaylongleft"
				this.overlaytitle = "overlaytitleright"
				setTimeout(() => {
					this.disfiex = 1
				}, 200)
			},
			Signup() {
				this.overlaylong = "overlaylongright"
				this.overlaytitle = "overlaytitleleft"

				setTimeout(() => {
					this.disfiex = 0
				}, 200)

			}
		}
	}
</script>